<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.header ul{
				width: 900px;
				height: 50px;
				margin: 0 auto;
				/* background: red; */
			}
			.header ul li{
				float: left;
				width: 140px ;
				height: 50px;
				margin-right: 50px;
				list-style: none;
				background: blue;
			}
			.header ul li:last-child{
				margin-right: 0;
			}
			
			.banner{
				width: 900px;
				height: 500px;
				background: purple;
				margin: 0 auto;
			}
			.big{
				width: 900px;
				height: 300px;
				margin: 0 auto;
			}
			.big .left{
				float: left;
				width: 300px;
				height: 300px;
				background: green;
			}
			.big .mid{
				float: left;
				width: 300px;
				height: 300px;
				background: grey;
			}
			.big .right{
				float: right;
				width: 300px;
				height: 300px;
				/* background: yellow; */
			}
			.big .right .rup{
				width: 300px;
				height: 150px;
				background: skyblue;
			}
			.big .right .rdown{
				width: 300px;
				height: 150px;
				background: yellow;
			}
			.footer{
				width: 900px;
				height: 50px;
				background: red;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>			
		</div>
		<div class="banner"></div>
		<div class="big">
			<div class="left"></div>
			<div class="mid"></div>
			<div class="right">
				<div class="rup"></div>
				<div class="rdown"></div>
			</div>
		</div>
		<div class="footer"></div>
	</body>
</html>
